<mat-card>
    <mat-card-header>
        <mat-card-title>
            <div class="login-page-header">
                <img src="assets/images/homerseven.png" />
                <h2>Homer Login</h2>
            </div>
        </mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
            <p>
                <mat-form-field flex="50">
                    <input matInput placeholder="Username" name="username" required formControlName="username">
                </mat-form-field>
            </p>
            <p>
                <mat-form-field>
                    <input type="password" matInput placeholder="Password"
                        (keydown)="onCapsLock($event)"
                        (keyup)="onCapsLock($event)"
                        formControlName="password" required>
                    <mat-icon *ngIf="caps_lock" title="CAPS LOCK" alt="CAPS LOCK" matSuffix>warning</mat-icon>
                </mat-form-field>
            </p>

            <p *ngIf="error" class="error">
                {{ error }}
            </p>
            
            <mat-card-actions align="end">
                <button mat-raised-button color="primary">Login</button>
            </mat-card-actions>
        </form>
    </mat-card-content>
</mat-card>
